import React, { useEffect, useState } from 'react';
import { Modal, Form, Space } from 'antd';
import FormCondition from '@/components/FormCondition';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { notification } from 'antd';
const DeleteModel = (props) => {
  const { visible = false, onClose, loading, dispatch, handleCallback, onFatherClose } = props;
  const { show = false, detail = {} } = visible;
  const { id } = detail;
  console.log(detail)
  const [list, setList] = useState([])
  const [form] = Form.useForm();
  // 确认提交
  const handleUpAudit = () => {
    form.validateFields().then((values) => {
      const { deleteValue } = values
      if (deleteValue && deleteValue === '确认删除') {
        dispatch({
          type: 'liveStreaming/fakeDeleteFaceToFaceGoods',
          payload: { goodsIdList: [id] },
          callback: () => {
            handleCallback()
            onClose()
          }
        })
      } else {
        notification.warning({
          message: '温馨提示',
          description: `请输入“确认删除”`,
        });
      }
    });
  };

  const formItems = [
    {
      label: `确认删除`,
      name: 'deleteValue',
      placeholder: '请在输入框中输入“确认删除“'
    },
  ];
  const getColumns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    },
    {
      title: '价格',
      dataIndex: 'price',
    },


  ];
  const modalProps = {
    width: 650,
    visible: show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    confirmLoading: loading,
  };

  return (
    <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
      <Space direction={'vertical'} style={{ display: 'flex', textAlign: 'center', justifyContent: 'center', width: '100%' }}>
        <div style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 12 }}>
          <ExclamationCircleOutlined style={{ color: 'red' }} /> 确认删除吗?
        </div>
        <div>
          删除后已购用户将无法使用，确认删除吗？
        </div>

        <div>(30天内可在操作日志恢复商品)
        </div>
        <FormCondition form={form} formItems={formItems}></FormCondition>
      </Space>

    </Modal >
  );
};

export default connect(({ commodity, loading }) => ({
  loading: loading.effects['liveStreaming/fakeDeleteFaceToFaceGoods'],
}))(DeleteModel);
;
